<template>
	<div id="footer">
		<ul>
			<router-link tag="li" :to="{
				path:'/movie',
				query:{title:'神影电影'}
			}">
				<i class="fa fa-film"></i>
				<p>电影</p>
			</router-link>
			<router-link tag="li" :to="{
				path:'/cinema',
				query:{title:'神影影院'}
			}">
				<i class="fa fa-square"></i>
				<p>影视</p>
			</router-link>
			<router-link tag="li" :to="{
				path:'/mine',
				query:{title:'我的影院'}
			}">
				<i class="fa fa-user-circle"></i>
				<p>我的</p>
			</router-link>
		</ul>
	</div>
</template>

<script>
	export default {
		name: "TabBar"
	}
</script>

<style scoped>
	#footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: white;
		border-top: 2px solid #ccc;
	}

	#footer ul {
		display: flex;
		justify-content: space-around;
		text-align: center;
	}

	.router-link-active {
		color: #e54847;
	}
</style>
